<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title></title>
    <script type="text/javascript" src="js/flexible2.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
</head>

<body>
   
    <div class="coms-container" id="app">
        <div class="login-form">
            <div class="logo"></div>
            <div class="form-input">
                <div class="group-error" :class="{ 'show': $v.$error || errorMsg}">
                    <div class="error-tip" v-if="!$v.telphone.required">请输入手机号码</div>
                    <div class="error-tip" v-if="!$v.telphone.mobile">请输入正确手机号码</div>
                    <div class="error-tip" v-if="!$v.code.required">请输入验证码</div>
                    <div class="error-tip" v-if="!$v.code.minLength">请输入正确验证码</div>
                    <div class="error-tip" v-if="errorMsg">验证码不正确</div>
                </div>
                
                <form  @submit.prevent="submit">
                    <div class="item-cell">
                        <input type="number" v-model.trim="telphone" name="telphone" class="ipt-text" placeholder="请输入您的手机号"  />
                    </div>
                    <div class="item-cell item-yzm">
                      
                        <input type="number" name="code" v-model.trim="code" class="ipt-text" placeholder="请输入您的验证码" />
                        <button class="getyzm" type="button" @click="getCode" v-bind:disabled="$v.telphone.$invalid" v-if="!isSendCode">获取验证码</button>

                        <button class="getyzm" type="button" disabled v-if="isSendCode">重新获取({{time}}s)</button>

                        <!-- disabled -->
                    </div>
                    <input type="submit" class="coms-btn primary mt50" value="手机号登录" id="J_ipt-submit" />
                </form>
            </div>
        </div>
        <p class="login-tip-1">登录有问题？<a href="tel:19959277913">联系客服</a></p>
    </div>
    <script type="text/javascript" src="js/vue/vue-2.5.17.js"></script>
    <script type="text/javascript" src="js/vue/vuelidate.min.js"></script>
    <script type="text/javascript" src="js/vue/validators.min.js"></script>
    <script type="text/javascript" src="js/vue/axios.min.js"></script>
    <script type="text/javascript" src="js/vue/qs.js"></script>
    <script type="text/javascript">
       
    Vue.use(window.vuelidate.default);
   

    
    var helpers=validators.helpers;

    var required=validators.required;
    var minLength=validators.minLength;

    const mobile = (value) => /^1[34578]\d{9}$/.test(value)
  
   
   
    
 

    var app = new Vue({
        el: '#app',
        data: {
            telphone:'',
            code:'',
            isSendCode:'',
            time:60,
            errorMsg:""
        },
        created:function(){

        },
       
        
        methods: {
            submit:function(){
                var that=this;
                this.$v.$touch();
                if(!this.$v.$error){
                    axios({
                      method: 'post',
                      url: 'https://wnworld.com/chechedai/api/login.php',
                      transformRequest: [function (data) {
                            // 对 data 进行任意转换处理
                            return Qs.stringify(data)
                        }],
                      responseType: 'json', // 默认的
                      data: {
                        telphone:this.$v.telphone.$model,
                        code: this.$v.code.$model
                      }
                    }).then(function(response) {
                        if(response.data.ok){
                            window.location.href="login.html"
                        }else{
                            console.dir(that.errorMsg)
                            that.errorMsg=response.data.msg;
                            console.dir(that.errorMsg)
                        }
                    });
                }
            },
            countTime:function(){
                var that=this;
                var Timer=setInterval(function(){
                     var t=that.time;
                     t--;
                    if(t>0){
                        that.time=t;
                    }else{
                        that.isSendCode=false;
                        that.time=60;
                        clearInterval(Timer);
                    }
                },1000)
            },
            getCode:function(){
                console.dir("getCode");
                var that=this;
                axios({
                      method: 'post',
                      url: 'https://wnworld.com/chechedai/api/getcode.php',
                      transformRequest: [function (data) {
                        that.isSendCode=true;
                            // 对 data 进行任意转换处理
                            return Qs.stringify(data)
                        }],
                      responseType: 'json', // 默认的
                      data: {
                        telphone:this.$v.telphone.$model
                      }
                    }).then(function(response) {
                        
                        if(response.data.ok){
                           that.countTime();
                        }
                    });
            }
        },
        validations:{
            telphone: {
                required,
                mobile
            },
            code:{
                required,
                minLength:minLength(6)
            }
        }
    })
    </script>
</body>

</html>